<template>
	<div class="app-container">
		<titlename :navnum='navnum'></titlename>
		<div class="content">
			<el-form :model="json" :rules="rules" ref="json" label-width="120px" class="demo-ruleForm">
				<el-form-item class="informationaa" label="保险公司:" prop="insuranceId">
					<el-select class="selects" size="mini" v-model="json.insuranceId" placeholder="请选择保险公司" @change="changecomony(json.insuranceId)">
						<el-option-group v-for="group in options" :key="group.letter" :label="group.letter">
							<el-option v-for="item in group.insurances" :key="item.id" :label="item.insuranceName" :value="item.id">
							</el-option>
						</el-option-group>
					</el-select>
				</el-form-item>
				
				<el-form-item class="informationaa" label="批次名称:" prop="batchName">
					<el-input v-model="json.batchName" class="selects" size="mini" placeholder="请输入批次名称"></el-input>
				</el-form-item>
				
				
				<el-form-item class="informationaa" label="模板类型:">
					<div class="selects">
						<el-radio-group  v-model="json.batchType" size="mini" @change="chanmemodel">
						    <el-radio-button :disabled="iscanedit"  :label="item.value"   v-for="item in modellist">{{item.name}}</el-radio-button>
						 </el-radio-group>
					</div>
				</el-form-item>
				<el-form-item class="informationaa" label="选择模板:">
					<el-select  class="selects" size="mini" v-model="json.batchTypeId" placeholder="请选择模板" @change="worknumchange">
						<el-option class="selects selectss"  v-for="item in uppoliy" :label="item.batchName" :value="item.id">
							<div>{{ item.batchName }}</div>
     						  <div class="seconr_text"><span>{{item.effectiveDate}} 到  </span>
     						  	<span v-if="item.expiryDate">{{item.expiryDate}}</span>
     						  	<span v-else>不限</span>
     						  </div>
						</el-option>
					</el-select>
					<div class="el-form-item__error" v-if="mubanerror.error">
							{{mubanerror.message}}
						</div>
					<!-- <div class="z-errorbox">
						<p class="z-error discriputetexts">
							{{discripute}}
						</p>
					</div> -->
				</el-form-item>
				<el-form-item class="informationaa" label="适用工号:" prop="staffId">
					<el-select  class="selects" size="mini" multiple v-model="json.staffId" placeholder="请选择适用工号">
						<el-option class="selects" v-for="item in workoptions" :key="item.id" :label="item.staffAccount" :value="item.id">
							
						</el-option>
					</el-select>
				</el-form-item>
				<!--<el-form-item class="informationaa informations" label="有效时间:">
					<el-col :span="10">
						<el-form-item>
							<el-date-picker class="dateinp"  size="mini" v-model="json.effectiveDate" :picker-options="startDateOpt" prefix-icon=" "  type="datetime" placeholder="生效时间"></el-date-picker>
						</el-form-item>
					</el-col>
					<el-col class="line" :span="3">到</el-col>
					<el-col :span="8">
						
						<el-form-item>
							<el-date-picker :disabled="islimit" class="dateinp" size="mini" v-model="json.expiryDate" :picker-options="endDateOpt" prefix-icon=" " type="datetime" placeholder="截止时间"></el-date-picker>
						</el-form-item>
					</el-col>
					<div class="sscheckbox">
						<el-checkbox  v-model="islimit">不限</el-checkbox>
					</div>
				</el-form-item>-->
				<!-- <div style="margin:0 auto;width:514px;">
					<datachange :json="json" ></datachange>
				</div> -->
				<el-form-item style="width:514px;" class="informationaa" :class="{'begin-error':errormsg.beginerror,'end-error':errormsg.enderror}" label="有效时间:" required>
					<datachange :json="json" v-on:inf='inf'></datachange>
				
					<div class="el-form-item__error" v-if="errormsg.beginerror||errormsg.enderror">
							{{errormsg.message}}
						</div>
					<div class="z-errorbox">
						<p class="z-error texts">
						<i class="iconfont icon-xuanzhong"></i> 以<span>{{chosedates}}</span>作为匹配日期类型
					</p>
					</div>
					
					</el-form-item>	
				<!-- <el-form-item class="informationaa information_only" label=" ">
					<p class="texts">
						<i class="iconfont icon-xuanzhong"></i> 以<span>{{chosedates}}</span>作为匹配日期类型
					</p>
				</el-form-item> -->
				
				<el-form-item class="informationaa" label="是否奖励批次:">
					<el-checkbox  class="" v-model="json.isReward"></el-checkbox>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" size="small" class="btn" :loading="loading" @click="btn('json')">确定</el-button>
				</el-form-item>
			</el-form>
			<el-dialog title="提示" :visible.sync="dialogTableVisible" width="700px" class="toDis-dialog upper4-dialog" :close-on-click-modal="false">
				<p class="dialog-tit">
						{{nowmessage}}
					<!-- 当前批次“<span class="toblue">{{json.batchName}}</span>”与以下政策批次有效时间重叠，点击“确定”，系统将自动修改重叠批次的截止时间为当前批次的开始时间 {{json.effectiveDate}} -->
				</p>
				<div class="dialog-max">
					<div class="visi-wrp">
						<div class="visi-list">
							<div class="list_name">
								批次名称
							</div>
							<div class="list_time">
								有效时间
							</div>
							<template v-for="(item,index) in existence">
								<div class="list_name">
								{{item.batchName}}
								</div>
								<div class="list_time">
									{{item.effectiveDate}} -
									<span v-if="item.expiryDate">{{item.expiryDate}}</span>
									<span v-else>不限</span>
								</div>
							</template>
						</div>
					</div>
				</div>
				<div slot="footer" class="dialog-footer">
					<el-button class="upper4-sureBtn" @click="goEdit" size="small" style="min-width:70px;">取消</el-button>
					<el-button class="upper4-sureBtn" type="primary" @click="toRoval_sure()" :loading="loadroval" size="small" style="min-width:70px;">确定</el-button>
				</div>
			</el-dialog>
			<!--有冲突不提交-->
			<el-dialog title="提示" :visible.sync="candialogTableVisible" width="700px" class="toDis-dialog upper4-dialog" :close-on-click-modal="false">
				<p class="dialog-tit">
					{{nowmessage}}
				</p>
				<div class="dialog-max">
					<div class="visi-wrp">
						<div class="visi-list">
							<div class="list_name">
								批次名称
							</div>
							<div class="list_time">
								有效时间
							</div>
							<template v-for="(item,index) in existence">
								<div class="list_name">
								{{item.batchName}}
								</div>
								<div class="list_time">
									{{item.effectiveDate}} -
									<span v-if="item.expiryDate">{{item.expiryDate}}</span>
									<span v-else>不限</span>
								</div>
							</template>
						</div>
					</div>
				</div>
				<div slot="footer" class="dialog-footer">
					<!-- <el-button class="upper4-sureBtn" @click="candialogTableVisible=false" size="small" style="min-width:70px;">取消</el-button> -->
					<el-button class="upper4-sureBtn" type="primary" @click="candialogTableVisible=false" :loading="loadroval" size="small" style="min-width:70px;">关闭</el-button>
				</div>
			</el-dialog>
		
		</div>
	</div>
</template>
<script>
	import Vue from 'vue'
	import titlename from '../policynew/assembly/titlename'
	import datachange from '@/components/datachange/datachange'
	export default {
		data() {
			return {
				loadroval:false,
				dialogTableVisible:false,
				existence:[],
				iscanedit:true,
				navnum: {
					name: "创建下游批次",
					icon: "iconfont icon-biaoti"
				},
				value: "",
				chosedates: "支付日期",
				islimit: true,
				options: [],
				workoptions: [],
				uppoliy:[],
				endateprop: "",
				rules: {
					batchName: [{
							required: true,
							message: '请输入批次名称',
							trigger: 'blur'
						},
						{
							min: 1,
							max: 50,
							message: '长度在 1 到 50个字符',
							trigger: 'blur'
						}
					],
					insuranceId: [{
						required: true,
						message: '请选择保险公司',
						trigger: 'change'
					}],
					staffId: [{
						required: true,
						message: '请选择适用工号',
						trigger: 'change'
					}],
					effectiveDate: [{
						type: 'date',
						required: true,
						message: '请选择生效日期',
						trigger: 'change'
					}],
					expiryDate: [{
						type: 'date',
						required: true,
						message: '请选择截止日期',
						trigger: 'change'
					}],
					batchTypeId:[{
						required: true,
						message: '请选择上游批次',
						trigger: 'change'
					}]
					
				},
				json: {
					//					//真被观测批次id
					//					id: "",
					batchName: "",
					//公司id
					batchType:"",
					insuranceId: "",
					batchTypeId:"",  //上游批次id
					//工号id
					staffId: [],
					//开始
					effectiveDate:"",
					//结束
					expiryDate:"",
					//是奖励
					isReward: false
				},
				
				comeprev: false,
				islimits: true,
				modellist: [
				{
						name: "上游批次作为模板",
						value:'3'
					},
				{
						name: "历史批次作为模板",
						value:'1'
					},
				{
						name: "空白模板",
						value:'0'
				},
					{
						name: "系统模板",
						value:'2'
					}
				],
				templatelist: [],
				id:"",
				batchType:null,
				loading:false,
				endDateOpt: this.enddate(),
				startDateOpt: this.startdate(),
				errormsg:{
					beginerror:false,
					enderror:false,
					message:''
				},
				mubanerror:{
					error:false,
					message:''
				},
				unli:true,
				candialogTableVisible: false,
				nowmessage: "",
				newid: ""
			}
		},
		mounted() {
			this.getcommoy()
			console.log(11111)
			console.log(this.$route)
			if(this.$route.query.id){
				this.id=this.$route.query.id
				this.fromtop()
			}
		},
		methods: {
			//开始时间
			startdate() {
				var that = this
				return {
					disabledDate(time) {
						if(that.json.expiryDate != "") {
							return  time.getTime() > that.json.expiryDate
						}
					}
				}
			},
			//结束时间
			enddate() {
				var that = this
				return {
					disabledDate(time) {
						return time.getTime() < that.json.effectiveDate
					}
				}
			},
		
			//获取公司列表
			getcommoy() {
				let params = {};
				this.post(params, "services/app/common/GetGroupInsurances").then(res => {
					if(res.success) {
						this.options = res.result.items
					} else {
						this.$notify.error({
							title: '错误',
							message: res.error.message
						});
					}

				});
			},
			//更改公司
			changecomony(val) {
				let arr=[]
				Vue.set(this.json,"staffId",arr)
				this.workoptions=arr
				this.json.batchTypeId=""
				Vue.set(this.json,"batchTypeId",'')
				Vue.set(this.json,"effectiveDate",'')
				Vue.set(this.json,"expiryDate",'')
				Vue.set(this.json,"isReward",false)
				Vue.set(this.json,"batchType",'3')
				this.getWorknumber(val)
				this.chanmemodel(this.json.batchType)
			},
			//获取工号
			getWorknumber(val) {
				console.log(val)
				let params = {
					id: val
				};
				this.post(params, "services/app/common/GetCurrentInsuranceStaffs").then(res => {
					if(res.success) {
						console.log("num")
						console.log(res)
						this.workoptions = res.result.items
						for(var i = 0; i < this.workoptions.length; i++) {
							if(this.workoptions[i].describe != "") {
								this.workoptions[i].staffAccount = this.workoptions[i].staffAccount + " (" + this.workoptions[i].describe + ")"
							} else {
								this.workoptions[i].staffAccount = this.workoptions[i].staffAccount
							}
						}
					} else {
						this.$notify.error({
							title: '错误',
							message: res.error.message
						});
					}

				});
			},
			//切换模板
			chanmemodel(val){
				this.islimit=true
				Vue.set(this.json,"isReward",false)
				//let arr=[]
				//Vue.set(this.json,"staffId",arr)
				Vue.set(this.json,"expiryDate",'')
				Vue.set(this.json,"effectiveDate",'')
				//let arr=[]
				//this.workoptions=arr
				console.log(val)
				this.json.batchTypeId=""
				if(val==0){
					let arr=[]
					this.uppoliy=arr
				}else if(val==3){
					this.getuppoliy(this.json.insuranceId)
				}else if(val==2){
					this.getsysmlist(this.json.insuranceId)
				}
				else if(val==1){
					this.gethistorysysmlist(this.json.insuranceId)
				}
			},
			
			//获取烯烃模板数据
			getsysmlist(val) {
				let params = {
					insuranceId: val
				};
				this.post(params, "services/app/policy/GetSystemTemplateList").then(res => {
					if(res.success) {
						console.log("shuju")
						console.log(res)
						this.uppoliy = res.result.items
					} else {
						this.$notify.error({
							title: '错误',
							message: res.error.message
						});
					}

				});

			},
			//获取历史数据
			gethistorysysmlist(val) {
				let params = {
					insuranceId: val,
					IsUpperPolicyBatch:1
				};
				this.post(params, "services/app/policy/GetMatchDateHistoryBatchList").then(res => {
					if(res.success) {
						console.log("shuju")
						console.log(res)
						this.uppoliy = res.result.items
					} else {
						this.$notify.error({
							title: '错误',
							message: res.error.message
						});
					}

				});

			},
			//更改政策批次
			worknumchange(val){
				console.log(val)
				
				//获取基本信息
				this.getBasic(val)
				//返回是否是系统模板
			},
			//上有过来
			fromtop(){
				var that=this
				let params = {
					'id':this.id
				}
				this.post(params,'services/app/policy/GetPolicyBatchBasicCreateLowerPolicy').then(rs => {
					if(rs.success){
						this.json=rs.result
						console.log("success")
						console.log(rs.result);
						this.getWorknumber(rs.result.insuranceId)
						
						this.workoptions=rs.result.staffNames
						this.workoptions.map(item=>{
							item.id=item.staffId
						})
						this.chosedates=rs.result.matchDateType
						let arr=[]
						for(var i = 0; i < this.workoptions.length; i++) {
							arr.push(this.workoptions[i].staffId)
							if(this.workoptions[i].describe != "") {
								this.workoptions[i].staffAccount = this.workoptions[i].staffAccount + " (" + this.workoptions[i].describe + ")"
							} else {
								this.workoptions[i].staffAccount = this.workoptions[i].staffAccount
							}
						}
						this.json.insuranceId=rs.result.insuranceId
						//默认政策
						//batchTypeId
						this.getuppoliy(rs.result.insuranceId).then(function(){
							console.log("pppppppppppppppppppppppp")
							that.json.batchTypeId=that.id
						})
						
						Vue.set(this.json,"staffId",arr)
						this.json.effectiveDate=rs.result.effectiveDate
						this.json.isReward=rs.result.isReward
						this.json.batchType="3"
						if(rs.result.expiryDate){
							this.json.expiryDate=rs.result.expiryDate
							this.islimit=false
						}else{
							this.islimit=true
							this.json.expiryDate=""
						}
					}else{
						  this.$notify.error({
				              title: '错误',
				              message: res.error.message
				            });
					}
				})
			},
			//信息
			getBasic(val){
				let params = {
					'id':val
				}
				this.post(params,'services/app/policy/GetPolicyBatchBasicCreateLowerPolicy').then(rs => {
					if(rs.success){
						console.log("success")
						console.log(rs.result);
						//this.workoptions=rs.result.staffNames
						this.chosedates=rs.result.matchDateType
						this.batchType=rs.result.batchType
						Vue.set(this.json,"effectiveDate",rs.result.effectiveDate)
						//Vue.set(this.json,"batchType",rs.result.batchType)
						//this.json.effectiveDate=rs.result.effectiveDate
						this.json.isReward=rs.result.isReward
						if(rs.result.expiryDate){
							this.json.expiryDate=rs.result.expiryDate
							this.islimit=false
						}else{
							this.islimit=true
						}
						let arr=[]
						//公司下的工号没有了创建模板时的工号 筛选
						for(let i = 0; i < rs.result.staffNames.length; i++) {
							for(let j=0;j<this.workoptions.length;j++){
								if(rs.result.staffNames[i].staffId==this.workoptions[j].id){
									arr.push(rs.result.staffNames[i].staffId)
								}
							}
							
							
						}
						Vue.set(this.json,"staffId",arr)
						console.log('---------------------')
						console.log(this.json.staffId)
						console.log(this.workoptions)
					}else{
						  this.$notify.error({
				              title: '错误',
				              message: res.error.message
				            });
					}
				})
			},
			//获取上游政策批次
			async getuppoliy(val){
					console.log(val)
					let params = {
						insuranceId: val
					};
					await this.post(params, "services/app/policy/GetUpperHistoryBatchList").then(res => {
						if(res.success) {
							console.log("upnum")
							console.log(res)
							this.uppoliy=res.result.items
						} else {
							this.$notify.error({
								title: '错误',
								message: res.error.message
							});
						}
	
					});
			},
			//查看冲突
			isconflict(){
				this.loading = true;
				let IsReward=this.json.isReward?1:0
				console.log(this.json)
				let params={
					staffs:this.json.staffId,
					effectiveDate:this.json.effectiveDate,
					expiryDate:this.json.expiryDate,
					isUpperBatch:1,
					IsReward:IsReward,
					PolicyBatchId:''
				}
				this.post(params,'services/app/policy/CheckEffectivedCreatePolicyBatchNew').then(res=>{
					if(res.success){
						this.loading = false;
						console.log('chongtu')
							if(res.result.code == 0) {
							//无冲突
							this.submiss()
						} else if(res.result.code == -1 || res.result.code == -2) {
							//有冲突 不能提交
							this.candialogTableVisible = true
							this.nowmessage = res.result.message
							this.existence = res.result.items

						} else {
							//有冲突 解决冲突
							this.dialogTableVisible = true
							this.existence = res.result.items
							this.nowmessage = res.result.message
							this.newid = res.result.id
						}
//						console.log(res)
//						this.existence=res.result.items
//						if(res.result.items.length>0){
//							//冲突
//							//有冲突
//							this.dialogTableVisible=true
//						}else{
//							//不冲突
//							this.submiss()
//						}
					}else{
						this.loading = false;
						this.$notify.error({
							title: '错误',
							message: res.error.message
						});
					}
				})
			},
			goEdit() {
				this.loading= false;
				this.dialogTableVisible=false
			},
			toRoval_sure() {
				this.dialogTableVisible = false;
				this.loadroval = true; //冲突确定按钮loading
				this.submiss()
				this.toupdate()
			},
			//更新状态
			toupdate(){
				let IsReward=this.json.isReward?1:0
				let params={
					id: this.newid
//					staffs:this.json.staffId,
//					effectiveDate:this.json.effectiveDate,
//					expiryDate:this.json.expiryDate,
//					isUpperBatch:1,
//					IsReward:IsReward
				}
				this.post(params,'services/app/policy/UpdateExpiryDateCreatePolicyBatchNew').then(res=>{
					if(res.success){
						console.log("更新成功")
					}else{
						this.$notify.error({
							title: '错误',
							message: res.error.message
						});
					}
				})
			},
			//tijiao
			submiss(){
				this.loading=true
						let params = this.json
						this.post(params, "services/app/policy/CreateLowerPolicyBatch").then(res => {
							if(res.success) {
								this.$route.query.id=""
								// this.loading=false
								console.log(res) //batchId
								if(res.result.batchType!=2){//空白模板或历史模板
									this.$router.push({
										name:"policylower3",
										query:{
											batchId:res.result.batchId,
											isback:true
										}
									})
								}else{
									//系统模板
									this.$router.push({
										name:"policylower3s",
										query:{
											batchId:res.result.batchId,
											isback:true
										}
									})
								}
							} else {
								this.loading=false;
								this.loadroval = true;
								this.$notify.error({
									title: '错误',
									message: res.error.message
								});

							}

						});
			},
			//开始结束时间是否不限
			inf(val){
				this.unli = val;
			},
			btn(formName) {
				console.log(this.json)
				//判断是否是系统模板
				this.$refs[formName].validate((valid) => {
					if(valid) {
						if(this.json.batchType!=0){
							if(this.json.batchTypeId==""){
								
							this.mubanerror = {
								error:true,
								message:'请选择模板'
							}
								return false;
							}
						}else{
							this.mubanerror = {
								error:false,
								message:'请选择模板'
							}
						}
						if(this.unli){ //是否不限
							if(this.json.effectiveDate==""||this.json.effectiveDate===null){
							
							this.errormsg ={
									beginerror:true,
									message:'开始时间不能为空'
								}
							  return false;
							}else{
								this.errormsg ={
										beginerror:false,
										message:'开始时间不能为空'
									}
							}
						}else{
							if(this.json.expiryDate ==""||this.json.expiryDate ===null){
								this.errormsg ={
									enderror:true,
									message:'结束时间不能为空'
								}
										return false
							}else{
									this.errormsg ={
									enderror:false
								}
							}
						}
						
						
						if(this.json.expiryDate!=""&&this.json.effectiveDate!=""){
							if(Date.parse(new Date(this.json.effectiveDate))>Date.parse(new Date(this.json.expiryDate))){
								// this.$message({
							    //       message: '开始时间不能大于结束时间',
							    //       type: 'warning'
								//     });
								this.errormsg ={
										beginerror:true,
										enderror:true,
										message:'开始时间不能大于结束时间'
									}
							        return false;
							}else{
								this.errormsg ={
									beginerror:false,
									enderror:false,
								}
							}
								  
							
						}
						
						//查看冲突
						this.isconflict()
						//不查看冲突
						//this.submiss()
						
					
					
					} else {
						console.log(235)
						return false;
					}
				});

			}
		},
		components: {
			titlename,
			datachange
		},
		watch: {
			islimit() {
				if(this.islimit == true) {
					this.json.expiryDate = ""
					this.endateprop = ''
					this.islimits = true
				} else {
					this.endateprop = 'expiryDate'
					this.islimits = false
				}

			},
			'json.insuranceId': {
				handler: function(n, o) {
					if(this.json.insuranceId==""){
						this.iscanedit=true
					}else{
						this.iscanedit=false
					}
				},
				deep: true　　
			},
			$route(from,to){
				console.log(1111111111111111111)
				console.log(from)
			}
		}

	}
</script>
<style lang="scss" scoped>
	.content {
		width: 1005px;
		height: 100%;
		margin: 0 auto;
	}
	.toblue{
		color:#0099ff;
	}
	
	.informationaa {
		width: 514px;
		margin: 0 auto 28px;
	}
	
	.selects {
		width: 415px;
	}
	
	.informations {
		margin-bottom: 0;
		position: relative;
		div {
			position: relative;
			.sscheckbox {
				position: absolute;
				right: -75px;
				top: 0;
				height: 100%;
				width: 80px;
			}
		}
	}
	
	.btn {
		display: block;
		margin: 0 auto 40px;
	}
	
	.discriputetexts {
		width: 385px;
		margin-top: 10px;
		font-size: 13px;
		color: #CBCBCB;
	}
	
	.texts {
		width: 385px;
		font-size: 13px;
		color: #CBCBCB;
		letter-spacing: 0;
		text-align: left;
		text-indent: 0;
		line-height: 28px;
		.icon-xuanzhong {
			color: #FF7819;
			font-size: 8px;
		}
		span {
			color: #1989FA;
		}
	}
	
	.modeltype {
		width: 369px;
		height: 28px;
		
		border-right: 0;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		background: #ffffff;
		font-size: 12px;
		.tabnav{
			width: 123px;
			height: 28px;
		}
		/*p {
			width: 123px;
			height: 100%;
			border-right: 1px solid #e0e3e9;
			box-sizing: border-box;
			text-align: center;
			cursor: pointer;
		}
		.choseactive {
			background: #1989fa;
			color: white;
		}*/
	}
	
	.dateinp {
		width: 171px;
	}
	
	.line {
		text-align: center;
	}
	.selectss{
		    height: auto;
		    div{
		    	line-height:17px;
		    }
   			padding: 5px 20px;
			.seconr_text{
				color: #CBCBCB;
			}
		
	}
	.information_only{
		margin-bottom:20px;
	}
		.selectss{
		height:50px;
		p:nth-child(1){
			height:15px;
			margin:0;
			line-height:15px;
		}
		p{
			margin:0;
			height:16px;
			line-height:16px;
			span{
				    color: #999;
			}
		}
		
	}
	.visi-list{
		width:100%;
		max-height:300px;
		border:1px solid #eee;
		border-bottom:0;
		overflow-y: auto;
		box-sizing: border-box;
		div{
			width:50%;
			height:40px;
			float:left;
			border-bottom:1px solid #eee;
			line-height:40px;
		}
		.list_name{
			text-indent:20px;
			border-right:1px solid #eee;
		}
		.list_time{
			text-indent:20px;
		}
	}
</style>